<template>
  <div>
    <el-row>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-finished"
          size="mini"
          @click="search"
        >查询</el-button>
      </el-col>
    </el-row>
    <u-table border ref="table" :data="list" v-loading="loading" height="480px" use-virtual big-data-checkbox>
      <u-table-column type="selection" width="55" align="center"/>
      <template v-for="item in columns">
        <u-table-column
          v-if="item.show"
          :show-overflow-tooltip="item.tooltip"
          :prop="item.prop"
          :key="item.prop"
          align="center"
          :label="item.label"
          :width="item.width"
          :sortable="item.sortable">
          <template slot-scope="scope">
            <span>{{ scope.row[item.prop] }}</span>
          </template>
        </u-table-column>
      </template>
    </u-table>
  </div>
</template>

<script>
export default {
  name: "Test",
  data() {
    return {
      loading: false,
      list: [],
      // 列信息
      columns: [
        {
          prop: 'userName',
          label: '用户名称',
          show: true,
          tooltip: true,
          width: 100
        },{
          prop: 'ipaddr',
          label: '地址',
          show: true,
          tooltip: true,
          width: 130
        },{
          prop: 'status',
          label: '登录状态',
          show: true,
          width: 80
        },{
          prop: 'msg',
          label: '描述',
          show: true,
          tooltip: true
        },{
          prop: 'accessTime',
          label: '访问时间',
          show: true,
          sortable: true,
          width: 135
        }
      ],
    }
  },
  methods: {
    search() {
      this.loading = true;
      // 假设异步请求后台数据
      setTimeout(() => {
        let arr = Array.from({ length: 500 }, (_, idx) => ({
            userName: `菜鸟${idx}`,
            ipaddr: `127.0.0.1`,
            status: '1',
            msg: '登陆成功',
            accessTime: '2022-08-03 10:00:00'
        }));
        this.list = arr;
        this.loading = false;
      }, 30)
    }
  }
}
</script>